import '../css/reset.css';
import '../css/index.css';
import Vue from "vue/dist/vue.js"
import VueRouter from 'vue-router'
import store from '../vuex/store.js'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';
Vue.use(VueRouter);
//console.log(store.state.count);
//console.log(store.getters.doubleCount);
//console.log(store.getters.doneTodos);//Getter会暴露为 store.getters 对象，你可以以属性的形式访问这些值
//console.log(store.getters.doneTodosCount);
//console.log(store.getters.getTodoByIdES6(2));
//1.定义(路由)组件
const A = {
	template:`<div>
	                       组件A--count是{{count}}--doneTodosCount是{{doneTodosCount}}
	             <button @click="increment({amount:1})">count加1</button>
	             <button-counter :m-msg ='give'></button-counter>
	          </div>`,
	data(){
		return{
			give:'传递给子组件的数据'
		}
	},
	computed:{
		count(){
			return this.$store.state.count
		},
		doneTodosCount(){
			//在任何组件中使用Getter
			return this.$store.getters.doneTodosCount
		}
	},
	methods:{
//		addCount(){
//			//在组件中提交mutation
//			this.$store.commit({
//				type:'increment',
//				amount:1
//			})
//		},
		...mapMutations([
			'increment'
		])
	}
};
const B = {
	template:'<div>组件B--count是{{count}}--age是{{age}}--countAlias是{{countAlias}}--countPlusLocalState是{{countPlusLocalState}}<button @click="dispatchAction">1秒后count加1</button></div>',
	data(){
	   return {
	   	  localCount:8
	   }
	},
	computed:mapState({
		// 箭头函数可使代码更简练
		count:state => state.count,
		age:state => state.age,
	    // 传字符串参数 'count' 等同于 `state => state.count`
	    countAlias:'count',
	    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
	    countPlusLocalState(state){
//	    	console.log(this)
	    	return state.count + this.localCount
	    }
	}),
	methods:{
		dispatchAction(){
			//分发action
//			this.$store.dispatch('incrementAsync');

			//以载荷形式分发action
//			this.$store.dispatch('incrementAsync',{
//				amount:1
//			});
			
			//以对象形式分发action
			this.$store.dispatch({
				type:'incrementAsync',
				amount:1
			});
		}
	}
};
const User = {
	props:['id'],
	template:`
	   <div class="user">
	       <h2>User---id是{{id}}--count是{{count}}</h2>
	       <router-view></router-view>
	  </div>
	`,
	computed:mapState([
		// 映射 this.count 为 store.state.count
		'count'
	])

};
const UserProfile = {
	template:'<div>UserProfile--doneCount是{{doneCount}}</div>',
	computed:mapGetters({
		 doneCount: 'doneTodosCount'
	})
};
const UserPosts = {
	template:'<div>UserPosts--countAlias是{{countAlias}}</div>',
	computed:{
		 ...mapState({
		     countAlias: 'count',
		 })
	}
}
//2.定义路由
const routes = [
   {
   	 path:'/',
   	 redirect: '/b',
   },
   {
   	  path:'/a',
   	  component:A,
   },
   {
   	  path:'/b',
   	  component:B
   },
   {   
   	  name:'user',
   	  path:'/user/:id',
   	  component:User,
   	  props:true,
      children:[
	        {
	          // 当 /user/:id/profile 匹配成功，
	          // UserProfile 会被渲染在 User 的 <router-view> 中
	          path: 'profile',
	          component: UserProfile
	        },
	        {
	          // 当 /user/:id/posts 匹配成功
          	  // UserPosts 会被渲染在 User 的 <router-view> 中
	          path: 'posts',
	          component: UserPosts
	        }
      ]
   }
]
//3.创建router实例
const router = new VueRouter({
	routes:routes
})
var id = 5;
router.beforeResolve((to,from,next)=>{
    if(id == 5){
    	next(); 	
    }else{
    	next('/a');
    }
})
//4.创建和挂载根实例
const app = new Vue({
	data:{
       isActive:true,
       activeClass:'active',
       styleObject:{
       	  color:'blue',
       	  fontSize:'13px'
       },
       styleObject1:{
       	  color:'yellow',
       	  fontSize:'53px',
       	  transform:'rotate(180deg)'
       },
	},
	store, // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
	router
}).$mount('#app')































//var ComponentA = {
//	props:{
//		  title: Object,
//		  likes: Number,
//		  isPublished: Boolean,
//		  commentIds: Array,
//		  author: Object
//	},
//	data:function(){
//		return{
//		   Atitle:this.title
//		}
//	},
//	beforeMount:function(){
//		this.Atitle.id = 10;
//	},
//	template:`<div>A组件接收到的数据--{{Atitle.id}}</div>`
//}
//var ComponentB = {
//	props:{
//	   bmsg:{
//	   		type: String,
//    		required: true
//	   }
//	},
//	template:`<div>B组件接收到的数据--{{bmsg}}</div>`
//}
//var ComponentC = {
//	  model:{
//	    prop: 'checked',
//	    event: 'change'
//	  },
//	  props: {
//	    checked: Boolean
//	  },
//	  template: `
//	    <input
//	      type="checkbox"
//	      v-bind:checked="checked"
//	      v-on:change="$emit('change', $event.target.checked)"
//	    >
//	  `
//}
//var ComponentD = {
//	 data:function(){
//	 	return{
//	 		msg:"slot"
//	 	}
//	 },
//	 template: `
//	    <div class="container">
//	       <header>
//	           <slot name="header"></slot>
//	       </header>
//	       <main>
//				<slot>{{msg}}</slot>
//	       </main>
//	       <footer>
//	          <slot name="footer"></slot>
//	       </footer>
//	    </div>
//	  `
//}
//var vm = new Vue({
//	  el: '#app',
//	  data:{
//	  	    lovingVue:false,
//		  	msg:'555',
//		  	post:{
//		  		id:1,
//		  		title:"ls"
//		  	}
//	   },
//	   components: {
//	    'component-a':ComponentA,
//	    'component-b':ComponentB,
//	    'base-checkbox':ComponentC,
//	    'component-d':ComponentD
//	   }
//})





















































































































































//function Fn(){
//
//}
//console.log(Fn.prototype);//原型对象
//console.log(Fn.prototype.constructor===Fn);//true 原型对象包含一个指向函数的指针
//var instance = new Fn();//实例
//console.log(instance.__proto__===Fn.prototype);//true 实例包含一个指向原型对象的指针

//function SuperType(){
//	 this.property = true;
//}
//SuperType.prototype.getSuperValue = function(){
//	  return this.property
//}
//
//function SubType(){
//	 this.subproperty = false;
//}
////继承了SuperType
//SubType.prototype = new SuperType();//把构造函数SuperType的一个实例赋值给了构造函数SubType的原型对象
//SubType.prototype.getSubValue = function(){
//	 return this.subproperty;
//}
//var instance = new SubType();//SubType的一个实例
//console.log(instance);//instance实例包含一个指向原型对象SubType.prototype的指针
//console.log(instance.getSuperValue);//true




